<template>
	<view class="goods">
		<swiper :indicator-dots="true" :circular="true">
			<swiper-item v-for="(item,index) of bannerList" :key="item.index">
				<image :src="item"></image>
			</swiper-item>
		</swiper>
		<view class="box1">
			<view class="price">
				<text>¥{{info.sell_price}}</text>
				<text>¥{{info.market_price}}</text>
			</view>
			<view class="goods_name">{{info.title}}</view>
		</view>
		<view class="line"></view>
		<view class="box2">
			<view>ISBN：{{info.goods_no}}</view>
			<view>库存：{{info.stock_quantity}}</view>
		</view>
		<view class="line"></view>
		<view class="box3">
			<view class="title">详情介绍</view>
			<view class="content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</view>
		<view class="goods_nav">
			<uni-goods-nav :fill="true"  :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue'
	export default {
		data() {
			return {
				bannerList: [
					'/static/第一本书图片1.jpg',
					'/static/第一本书图片2.jpg',
				],
				info: {
					 sell_price: 75.20,
					 market_price: 85.00,
					 title: "动手学深度学习(异步图书出品)",
					 goods_no: 9787115490841,
					 stock_quantity: 1000
				},
				content: '本书旨在向读者交付有关深度学习的交互式学习体验。书中不仅阐述深度学习的算法原理，还演示它们的实现和运行。与传统图书不同，本书的每一节都是一个可以下载并运行的 Jupyter记事本，它将文字、公式、图像、代码和运行结果结合在了一起。此外，读者还可以访问并参与书中内容的讨论。<br>全书的内容分为3个部分：第一部分介绍深度学习的背景，提供预备知识，并包括深度学习基础的概念和技术；第二部分描述深度学习计算的重要组成部分，还解释近年来令深度学习在多个领域大获成功的卷积神经网络和循环神经网络；第三部分评价优化算法，检验影响深度学习计算性能的重要因素，并分别列举深度学习在计算机视觉和自然语言处理中的重要应用。<br> 本书同时覆盖深度学习的方法和实践，主要面向在校大学生、技术人员和研究人员。阅读本书需要读者了解基本的Python编程或附录中描述的线性代数、微分和概率基础。',
				options: [{
				           icon: 'headphones',
				           text: '客服'
				       }, {
				           icon: 'shop',
				           text: '店铺',
				           info: 2,
				           infoBackgroundColor:'#007aff',
				           infoColor:"red"
				       }, {
				           icon: 'cart',
				           text: '购物车',
				           info: 2
				       }],
				       buttonGroup: [{
				         text: '加入购物车',
				         backgroundColor: '#ff0000',
				         color: '#fff'
				       },
				       {
				         text: '立即购买',
				         backgroundColor: '#ffa200',
				         color: '#fff'
				       }
				       ]
			}
		},
			methods: {
				onClick (e) {
				        uni.showToast({
				          title: `点击${e.content.text}`,
				          icon: 'none'
				        })
				      },
				      buttonClick (e) {
				        console.log(e)
				        this.options[2].info++
				      }
			},
			components: {uniGoodsNav}
		}
</script>

<style lang="scss">
	.goods {
		margin-top: 8rpx;

		swiper {
			width: 750rpx;
			height: 680rpx;

			image {
				height: 100%;
				width: 100%;
			}
		}
		.box1 {
			padding: 10px;

		.price {
			font-size: 40rpx;
			color: $shop-color;
			line-height: 60rpx;

			text:nth-child(2) {
				color: #ccc;
				font-size: 33rpx;
				text-decoration: line-through;
				margin-left: 20rpx;
			}
		}

		.goods_name {
			font-size: 34rpx;
			line-height: 60rpx;
		}
	
}
	.line {
		height: 10rpx;
		width: 750rpx;
		background: #eee;
	}

	.box2 {
		padding: 0 10px;
		font-size: 32rpx;
		line-height: 70rpx;
	}

	.box3 {
		padding-bottom: 50px;

		.title {
			font-size: 40rpx;
			padding-left: 10rpx;
			border-bottom: 1px solid #eee;
			line-height: 70rpx;
			font-weight: 550;
		}

		.content {
			padding: 10px;
			font-size: 35rpx;
			color: #000000;
			line-height: 50rpx;
		}
	}
}
	.goods_nav {
		position: fixed;
		bottom: 0;
		width: 100%;
	}
</style>
